<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted } from 'vue';
import { Search, Filter, ArrowDown } from '@element-plus/icons-vue'

// 收费列表列数据
const columns = [
    { title: '客户简称', key: 'customerShortName', sortable: true },
    { title: '客户编号', key: 'customerNo', sortable: true },
    { title: '操作', key: 'operation' },
    { title: '登记人', key: 'registerer', sortable: true },
    { title: '实收金额(元)', key: 'actualAmount', sortable: true },
    { title: '收款账户', key: 'receivingAccount' },
    { title: '支付时间', key: 'paymentTime', sortable: true },
    { title: '收费负责人', key: 'chargePerson' },
    { title: '审核状态', key: 'auditStatus', sortable: true, filterable: true },
    { title: '审核时间', key: 'auditTime', sortable: true },
    { title: '所属部门', key: 'department', sortable: true },
    { title: '片区', key: 'pq', sortable: true },
    { title: '登录时间', key: 'dlsj', sortable: true },
    { title: '审核备注', key: 'shbz', sortable: true },
    { title: '费用说明', key: 'fysm', sortable: true }
];

const mockData = ref([]);
const loading = ref(true);
const activeName = ref('all'); // 默认选中"全部收费记录"
const totalAmount = ref('0.00'); // 实收总金额

// 筛选表单数据
const filterForm = ref({
    registerer: '',
    chargePerson: '',
    receivingAccount: '',
    registerMethod: '',
    paymentTimeRange: [],
    registerTimeRange: [],
    auditTimeRange: [],
    department: '',
    includeSubDept: false,
    area: '',
    amountRange: []
});

// 搜索关键词
const searchKeyword = ref('');

// 处理标签页切换
const handleTabChange = (tabKey) => {
    loading.value = true;
    activeName.value = tabKey;

    setTimeout(() => {
        // 按标签页加载对应数据
        switch (tabKey) {
            case 'all':
                mockData.value = [
                    {
                        customerShortName: '阿里科技',
                        customerNo: 'CUST2023001',
                        registerer: '张三',
                        actualAmount: 15000,
                        receivingAccount: '公司基本户',
                        paymentTime: '2023-10-01',
                        chargePerson: '李四',
                        auditStatus: '审核通过',
                        auditTime: '2023-10-02',
                        department: '销售一部',
                    },
                    {
                        customerShortName: '腾讯科技',
                        customerNo: 'CUST2023002',
                        registerer: '王五',
                        actualAmount: 25000,
                        receivingAccount: '公司一般户',
                        paymentTime: '2023-10-03',
                        chargePerson: '赵六',
                        auditStatus: '待审核',
                        auditTime: '',
                        department: '销售二部',
                    }
                ];
                break;
            case 'pending':
                mockData.value = [
                    {
                        customerShortName: '百度网络',
                        customerNo: 'CUST2023003',
                        registerer: '孙七',
                        actualAmount: 30000,
                        receivingAccount: '公司基本户',
                        paymentTime: '2023-10-05',
                        chargePerson: '周八',
                        auditStatus: '待审核',
                        auditTime: '',
                        department: '销售三部',
                    }
                ];
                break;
            case 'approved':
                mockData.value = [
                    {
                        customerShortName: '阿里科技',
                        customerNo: 'CUST2023001',
                        registerer: '张三',
                        actualAmount: 15000,
                        receivingAccount: '公司基本户',
                        paymentTime: '2023-10-01',
                        chargePerson: '李四',
                        auditStatus: '审核通过',
                        auditTime: '2023-10-02',
                        department: '销售一部',
                    }
                ];
                break;
            case 'rejected':
                mockData.value = [
                    {
                        customerShortName: '京东商城',
                        customerNo: 'CUST2023004',
                        registerer: '吴九',
                        actualAmount: 18000,
                        receivingAccount: '公司一般户',
                        paymentTime: '2023-10-04',
                        chargePerson: '郑十',
                        auditStatus: '审核不通过',
                        auditTime: '2023-10-05',
                        department: '销售二部',
                    }
                ];
                break;
        }

        // 计算总金额
        calculateTotalAmount();
        loading.value = false;
    }, 500);
};

// 计算总金额
const calculateTotalAmount = () => {
    const total = mockData.value.reduce((sum, item) => sum + item.actualAmount, 0);
    totalAmount.value = total.toFixed(2);
};

// 筛选表单提交
const handleFilterSubmit = () => {
    loading.value = true;
    setTimeout(() => {
        // 这里添加实际筛选逻辑
        const filtered = [...mockData.value].filter(item => {
            // 登记人筛选
            if (filterForm.value.registerer && !item.registerer.includes(filterForm.value.registerer)) return false;
            // 收费负责人筛选
            if (filterForm.value.chargePerson && !item.chargePerson.includes(filterForm.value.chargePerson)) return false;
            // 收款账户筛选
            if (filterForm.value.receivingAccount && !item.receivingAccount.includes(filterForm.value.receivingAccount)) return false;
            // 金额范围筛选
            if (filterForm.value.amountRange.length) {
                const [min, max] = filterForm.value.amountRange;
                if ((min && item.actualAmount < min) || (max && item.actualAmount > max)) return false;
            }
            return true;
        });

        mockData.value = filtered;
        calculateTotalAmount();
        loading.value = false;
    }, 500);
};

// 重置筛选表单
const resetFilterForm = () => {
    filterForm.value = {
        registerer: '',
        chargePerson: '',
        receivingAccount: '',
        registerMethod: '',
        paymentTimeRange: [],
        registerTimeRange: [],
        auditTimeRange: [],
        department: '',
        includeSubDept: false,
        area: '',
        amountRange: []
    };
    // 重新加载当前标签页数据
    handleTabChange(activeName.value);
};

// 搜索功能
const handleSearch = () => {
    if (!searchKeyword.value) {
        // 搜索为空时重新加载当前标签页数据
        handleTabChange(activeName.value);
        return;
    }

    loading.value = true;
    setTimeout(() => {
        const keyword = searchKeyword.value.toLowerCase();
        const filtered = mockData.value.filter(item => {
            return item.customerShortName.toLowerCase().includes(keyword) ||
                item.customerNo.toLowerCase().includes(keyword);
        });
        mockData.value = filtered;
        calculateTotalAmount();
        loading.value = false;
    }, 500);
};

// 页面挂载时加载初始数据
onMounted(() => {
    handleTabChange('all');
});
</script>

<template>
    <div class="charge-management">
        <!-- 顶部筛选区域 -->
        <div class="top-filter">
            <div class="top-filter-left">
                <!-- 筛选弹窗 -->
                <stick-popup>
                    <template #show>
                        <div class="filter-btn">
                            <div class="filter-btn-label">筛选</div>
                            <div class="filter-btn-icon">
                                <Filter />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <div class="filter-form-container">
                            <el-form :model="filterForm" label-width="100px">
                                <!-- 登记人 -->
                                <el-form-item label="登记人">
                                    <el-input v-model="filterForm.registerer" placeholder="搜索登记人" />
                                </el-form-item>

                                <!-- 收费负责人 -->
                                <el-form-item label="收费负责人">
                                    <el-input v-model="filterForm.chargePerson" placeholder="搜索收费负责人" />
                                </el-form-item>

                                <!-- 收款账户 -->
                                <el-form-item label="收款账户">
                                    <el-input v-model="filterForm.receivingAccount" placeholder="搜索收款账户" />
                                </el-form-item>

                                <!-- 登记方式 -->
                                <el-form-item label="登记方式">
                                    <div class="register-methods">
                                        <el-radio v-model="filterForm.registerMethod" label="manual">人工登记</el-radio>
                                        <el-radio v-model="filterForm.registerMethod" label="wechat">在线支付(微信)</el-radio>
                                        <el-radio v-model="filterForm.registerMethod"
                                            label="alipay">在线支付(支付宝)</el-radio>
                                        <el-radio v-model="filterForm.registerMethod" label="claim">人工认领</el-radio>
                                        <el-radio v-model="filterForm.registerMethod" label="batch">批量匹配认领</el-radio>
                                    </div>
                                </el-form-item>

                                <!-- 支付时间 -->
                                <el-form-item label="支付时间">
                                    <el-date-picker v-model="filterForm.paymentTimeRange" type="daterange"
                                        range-separator="到" start-placeholder="请选择日期" end-placeholder="请选择日期" />
                                </el-form-item>

                                <!-- 登记时间 -->
                                <el-form-item label="登记时间">
                                    <el-date-picker v-model="filterForm.registerTimeRange" type="daterange"
                                        range-separator="到" start-placeholder="请选择日期" end-placeholder="请选择日期" />
                                </el-form-item>

                                <!-- 审核时间 -->
                                <el-form-item label="审核时间">
                                    <el-date-picker v-model="filterForm.auditTimeRange" type="daterange"
                                        range-separator="到" start-placeholder="请选择日期" end-placeholder="请选择日期" />
                                </el-form-item>

                                <!-- 所属部门 -->
                                <el-form-item label="所属部门">
                                    <el-input v-model="filterForm.department" placeholder="搜索所属部门" />
                                </el-form-item>

                                <!-- 部门包含下级 -->
                                <el-form-item>
                                    <el-checkbox v-model="filterForm.includeSubDept" label="部门包含下级" />
                                </el-form-item>

                                <!-- 片区 -->
                                <el-form-item label="片区">
                                    <el-input v-model="filterForm.area" placeholder="搜索片区" />
                                </el-form-item>

                                <!-- 实收金额 -->
                                <el-form-item label="实收金额">
                                    <div class="amount-range">
                                        <el-input v-model.number="filterForm.amountRange[0]" placeholder="元"
                                            style="width: 45%;" />
                                        <span style="margin: 0 5%;">到</span>
                                        <el-input v-model.number="filterForm.amountRange[1]" placeholder="元"
                                            style="width: 45%;" />
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <template #footer>
                        <div class="filter-actions">
                            <el-button type="text" @click="resetFilterForm">重置</el-button>
                            <el-button type="primary" @click="handleFilterSubmit">确认</el-button>
                        </div>
                    </template>
                </stick-popup>

                <!-- 搜索框 -->
                <div class="search-box">
                    <el-input v-model="searchKeyword" placeholder="请输入客户简称或编号" @keyup.enter="handleSearch">
                        <template #append>
                            <el-button :icon="Search" @click="handleSearch" />
                        </template>
                    </el-input>
                </div>
            </div>

            <!-- 右侧操作按钮 -->
            <div class="top-filter-right">
                <el-button type="primary" class="batch-audit-btn">
                    批量审核
                    <ArrowDown class="btn-icon" />
                </el-button>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-container">
            <!-- 状态标签页 -->
            <div class="status-tabs">
                <el-tabs v-model="activeName" @tab-click="(tab) => handleTabChange(tab.name)" stretch>
                    <el-tab-pane label="全部收费记录" name="all"></el-tab-pane>
                    <el-tab-pane label="待审核记录" name="pending"></el-tab-pane>
                    <el-tab-pane label="审核通过" name="approved"></el-tab-pane>
                    <el-tab-pane label="审核不通过" name="rejected"></el-tab-pane>
                </el-tabs>

                <!-- 实收总金额 -->
                <div class="total-amount">
                    实收金额合计：{{ totalAmount }}
                </div>
            </div>

            <!-- 收费表格 -->
            <div class="charge-table">
                <my-table :loading="loading" :columns="columns" :dataSource="mockData" :showIndex="false"
                    :show-selection="true">
                    <!-- 金额格式化 -->
                    <template #data-actualAmount="scope">
                        {{ scope.data.actualAmount.toFixed(2) }}
                    </template>

                    <!-- 操作列 -->
                    <template #data-operation="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </my-table>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.charge-management {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f7fa;
    padding-bottom: 20px;
}

.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 10;

    .top-filter-left {
        display: flex;
        align-items: center;
        gap: 15px;

        .filter-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0 15px;
            height: 32px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
                border-color: #409eff;
                color: #409eff;
            }
        }

        .search-box {
            width: 300px;
        }
    }

    .top-filter-right {
        display: flex;
        gap: 10px;

        .batch-audit-btn {
            background-color: #ff7d00;
            border-color: #ff7d00;

            &:hover {
                background-color: #ff9733;
                border-color: #ff9733;
            }
        }

        .btn-icon {
            margin-left: 5px;
            font-size: 14px;
        }
    }
}

.table-container {
    width: calc(100% - 40px);
    margin: 20px auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 16px;
    box-sizing: border-box;

    .status-tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .total-amount {
            color: #606266;
            font-size: 14px;
            font-weight: 500;
        }
    }

    .charge-table {
        width: 100%;
        overflow-x: auto;
    }
}

.filter-form-container {
    padding: 15px;
    width: 450px;

    .el-form-item {
        margin-bottom: 15px;
    }

    .register-methods {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 20px;
        margin-top: 5px;
    }

    .amount-range {
        display: flex;
        align-items: center;
        width: 100%;
    }
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 15px;
    border-top: 1px solid #f0f0f0;
}
</style>